
@extends("home.footer")
@section("content")
<!doctype html>
<html>
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="药快"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=medium-dpi, minimal-ui"/>
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->

    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

    <meta name="msapplication-TileColor" content="#000"/>
    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型"/>
    <meta property="og:url" content="URL地址"/>
    <meta property="og:title" content="标题"/>
    <meta property="og:image" content="图片"/>
    <meta property="og:description" content="描述"/>
    <!-- sns 社交标签 end -->
    <title>首页</title>
    <link rel="stylesheet" href="{{ asset('myhome/css/common.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/font.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/header.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/footer.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/index.css') }}">
    <link rel="stylesheet" href="{{ asset('myhome/css/responsive.css') }}">
    <!-- banner -->
    <link rel="stylesheet" href="{{ asset('myhome/css/swiper.min.css') }}">
    <script type="text/javascript" src="{{ asset('/jquery-1.8.3.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('myhome/js/jquery.fly.min.js') }}"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=keXdM18CTQm5jrHeydPispemtrz5Y00v"></script>
    <style type="text/css">
        .swiper-wrapper a img {
            width: 100%;
        }

        .swiper-pagination-bullet {
            background: #BCBCBC;
            opacity: 0.5;
        }

        .swiper-pagination-bullet-active {
            background: #FF9F00;
            opacity: 0.8;
        }
    </style>
    <script type="text/javascript">
        // 百度地图API功能
        var city;
        var district;
        var street;
        var streetNumber;
        var business;
        var lng = "";
        var lat = "";
        if(typeof(BMap)!="undefined"){
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var point = new BMap.Point(r.point.lng, r.point.lat);
                    var gc = new BMap.Geocoder();
                    lng = r.point.lng;
                    lat = +r.point.lat;
                    gc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents;
                        city=addComp.city;
                        district=addComp.district;
                        //business=rs.business;
                        street=addComp.street;
                        streetNumber=addComp.streetNumber;
                        //alert(business);
                        dodel();
                    });
                } else {
                    alert('failed' + this.getStatus());
                }
            }, {enableHighAccuracy: true});
        }else{
            city="";
            $("#dw").html(city);
            dodel();

        };

        function dodel() {
            $('#dw').html("配送至："+city+","+district+","+street);
            $.ajax({
                url: '{{url('/location')}}',
                type: 'POST',
                dataType: 'json',
                cache: false,
                data: {_token: "{{ csrf_token() }}", lng: lng, lat: lat,city:city,district:district,street:street},
                success: function (data) {

                    //alert('距离您最近的药方是：' + data.name + 'ID:' + data.id);
                    var str = "";
                    //alert(data.data[0].id);
                    for (var i = 0; i < data.data.length; i++) {
                        str=str+"<div class='list' > <a href='/product/"+data.data[i].id+"'><div class='tu'  > <img src='myhome/img/"+data.data[i].preview+"'></div> <p class='tit'>"+data.data[i].name+"</p></a>  <div > <span class='price'>￥"+data.data[i].price+"</span> <button class='cart' onclick='incart("+data.data[i].id+")'><i class='icon-cart' id='addcar' ></i></button> </div>  </div>";
                    }
                    var tip = $(str);
                    $("#did").html(tip);
                    if(!city){
                        $("#dw").html("无法获取当前位置");
                    }

                    $(function() {
                        var offset = $("#end").offset();
                        $("#addcar").click(function(event){

                            var addcar = $(this);
                            var img = addcar.parent().find('img').attr('src');
                            var flyer = $('<img class="u-flyer" src="'+img+'">');
                            console.log(img);
                            flyer.fly({
                                start: {
                                    left: event.pageX, //开始位置（必填）#fly元素会被设置成position: fixed
                                    top: event.pageY //开始位置（必填）
                                },
                                end: {
                                    left: offset.left+10, //结束位置（必填）
                                    top: offset.top+10, //结束位置（必填）
                                    width: 0, //结束时宽度
                                    height: 0 //结束时高度
                                },
                                onEnd: function(){ //结束回调
                                    $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000); //提示信息
                                    addcar.css("cursor","default").removeClass('orange').unbind('click');
                                    this.destory(); //移除dom
                                }
                            });
                        });
                    });


                },
                error: function (data) {

                }
            });
        }
    </script>
</head>

<body ontouchstart="return true;" style="margin-bottom: 20px;">

<!--头部-->
<header class="search" id="search">
    <div class="header">
        <h1><img src="{{ asset('myhome/img/logo.png') }}"></h1>
        <form method="post" action="home/search">
        <div class="search-box" id="search-box"><i class="icon-sousuo"></i>
            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
            <input type="search" id="search-input" name="sousuo" class="" placeholder="搜索商品"/>
            <button id="search-cancel">取消</button>
            <button id="search-submit">搜索</button>
        </div>
        </form>
        {{--<!--<div class="head-delivery head-r" id="Delivery"><i class="icon-address"></i><span id="head-delivery">选择配送点</span></div>-->--}}
    </div>
    <!--通知公告/客服电话-->
</header>

<!--搜索内容-->
<div class="search-content" id="search-content"  name="sousuo"><i class="icon-font"></i></div>

<!--内容区-->
<article class="main-container">
    <div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper" >
            @foreach( $banner as $k => $v)
            <div class="swiper-slide" ><A href=""><img src="{{ asset('upload/theme/'.$v['name']) }}"/></A></div>
            @endforeach
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination" ></div>
    </div>
    <!-- 分类 -->
<style>
    .location{height:1.6rem;margin:0 auto;background-color: rgb(255,255,255);font-size: 0.7rem;
        line-height: 1.6rem; margin-top: .5rem;text-align: center; }
    .location .icon-ditu{ height:1.2rem; margin:0rem auto 0 auto; font-size:1rem; color:rgba(233,67,67,.9); margin-right:.1rem; bottom:-0.3rem;}
</style>
    <div class="scred location">
        <span class="icon-ditu" ></span><span id="dw"></span>
    </div>
    <ul class="category"><!-- 分类图标为方形-->
        @foreach($type as $k =>$v )
            <li ><a href="/productlist?label={{ $v['name'] }}"> <img
                            src="{{ asset('upload/type/'.($v['pic']) ) }}" width="10px" >
                    <p style="font-size: 0.7rem" >{{ $v['name'] }}</p>
                </a>
            </li>
        @endforeach
        {{--<li><a href="/home/typelist">--}}
                {{--<img src="{{asset('upload/type/type.png')}}"/>--}}
                {{--<p>所有分类</p>--}}
            {{--</a></li>--}}
    </ul>
    <div class="clearfix"></div>
    <!-- 分类end -->
    {{--<div class="rexiaotitle">热销专场</div>--}}
    <div class="LayerHeader line" style="font-size: 1.2rem ; border-bottom-width:0; padding-bottom:.2rem; color:#E94A4A;"><i class="icon-lipin"></i>&nbsp;热销专场</div>
    <style>
        .zhuti{ width:100%;}
        .zhuti a{ height:auto; display:inline-table; position:relative; padding:0; line-height:0;}
        .zhuti a:nth-child(odd) { width:49.8%; margin:.2rem auto 0 0; float:left;}
        .zhuti a:nth-child(even){ width:49.8%; margin:.2rem 0 0 auto; float:right;}
        .zhuti a img{ width:100%; position:relative; margin:0; padding:0;border:0;}
        /*.zhuti a img{ width:50%; height:auto;}*/
    </style>

    {{--热销专场--}}
    <div class="scred zhuti">
        @foreach($rexiao as $k=>$v)
        <a href="{{ $v['url'] }}"><img src="{{ asset('upload/theme/'.($v['name']) ) }}" /></a>
        @endforeach
    </div>
    <div style="width:100%; height:1rem"></div>
</article>
@stop

<!--底部栏目-->
